<template>
  <q-card flat>
    <q-tabs
      align="left"
      dense
      v-model="pageParam.order"
      @update:model-value="
        (val) => {
          pageParam.pageNum = 1
          pageParam.order = val
          f5()
        }
      "
      active-color="primary"
    >
      <q-tab name="create_time" label="最新创建" />
      <q-tab name="read_num" label="最多阅读" />
      <q-tab name="edit_time" label="最近更新" />
    </q-tabs>
    <div class="absolute-right row items-center">
      <q-input
        dense
        v-model="pageParam.text"
        type="text"
        label="查询字段"
        debounce="500"
        @update:model-value="
          (val) => {
            pageParam.pageNum = 1
            pageParam.text = val as string
            f5()
          }
        "
      />
      <q-btn flat icon="refresh" @click="f5()">
        <q-tooltip> 刷新 </q-tooltip>
      </q-btn>
    </div>
  </q-card>
  <div class="row justify-center q-pa-md" v-if="loading">
    <q-spinner color="primary" size="3em" />
  </div>

  <q-list separator dense v-if="!loading">
    <q-item
      v-for="item in rows"
      :key="item.id"
      :to="{
        path: '/blog/' + item.id,
      }"
    >
      <q-item-section>
        <div class="text-base line-clamp-1">{{ item.title }}</div>
        <div class="text-sm line-clamp-1">{{ item.summary }}</div>
        <div class="row justify-between items-center">
          <div class="text-caption row q-gutter-md">
            <div>
              更新时间: {{ item.relativeTime }}
              <q-tooltip>
                <div>发布时间: {{ item.createTime }}</div>
                <div>更新时间: {{ item.updateTime }}</div>
              </q-tooltip>
            </div>
            <div>阅读数量: {{ item.readNum }}</div>
            <div>点赞数量: {{ item.star }}</div>
            <div>收藏数量: {{ item.favorites }}</div>
            <div>评论数量: {{ item.commentNum }}</div>
            <div>
              状态:
              <span v-if="item.status == 1" class="bg-positive rounded-borders text-white q-pa-xs">
                已发布
              </span>
              <span v-else class="bg-warning rounded-borders text-white q-pa-xs"> 草稿 </span>
            </div>
          </div>
          <div class="text-caption">
            <RouterLink :to="'/add-blog?id=' + item.id">
              <q-chip clickable class="glossy" dense square icon="edit" label="编辑" />
            </RouterLink>
            <q-chip
              class="glossy"
              clickable
              @click.prevent="
                () => {
                  commentDig = true
                  digArticleId = item.id
                }
              "
              dense
              square
              icon="comment"
              label="查看评论"
            />
          </div>
        </div>
      </q-item-section>
      <q-item-section avatar v-if="item.articleCover">
        <q-avatar size="100px" square>
          <q-img :src="item.articleCover" />
        </q-avatar>
      </q-item-section>
    </q-item>
  </q-list>
  <q-list separator dense v-if="!loading && pageParam.recordCount == 0">
    <q-item>
      <q-item-section>
        <q-item-label class="text-center">
          {{ pageParam.text }} 未查询到内容，请换个词
        </q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
  <div v-if="!loading && pageParam.totalPage > 1" class="row justify-center items-center q-pa-sm">
    <div>共 {{ pageParam.recordCount }} 篇文章</div>
    <q-pagination
      @update:model-value="
        (value) => {
          pageParam.pageNum = value
          f5()
        }
      "
      v-model="pageParam.pageNum"
      :max="pageParam.totalPage"
      :max-pages="6"
      direction-links
    />
  </div>
  <q-dialog v-model="commentDig">
    <ShowComment :article-id="digArticleId"></ShowComment>
  </q-dialog>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { creationArticle } from 'src/service/api'
import { ref } from 'vue'
import ShowComment from './ShowComment.vue'
import { onMounted } from 'vue'

const pageParam = ref({
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  order: 'create_time',
  text: '',
})

type rowsType = ApiType<typeof creationArticle>['Return']['rows'][0]
const rows = ref<Array<rowsType>>([])
const commentDig = ref(false)

const digArticleId = ref('-1')

const loading = ref(false)

onMounted(() => {
  f5()
})
const f5 = () => {
  loading.value = true
  creationArticle(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (error) {
      return
    }
    rows.value = data.rows
    pageParam.value.pageNum = data.pageNum
    pageParam.value.pageSize = data.pageSize
    pageParam.value.totalPage = data.totalPage
    pageParam.value.recordCount = data.recordCount
  })
}
</script>

<style scoped></style>
